<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Centrifugo Frontend Demo</title>
		<script src="./js/centrifugo.js"></script>
	</head>
	<body>
		<h1>Centrifugo WebSocket 连接测试</h1>
		<pre id="log"></pre>

		<script>
			const centrifuge = new Centrifuge('ws://127.0.0.1:8022/connection/websocket', {
				// getToken: function () {
				//   return new Promise((resolve, reject) => {
				//     此处可以使用 单独的接口获取token
				//     resolve(getToken() as string);
				//   });
				// },
				token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJib2IifQ.bWd3phhwlnGOlJDIHF14d2rrxgcWqZrAHZ4Zuibu5qQ",
			});

			// 设置订阅的频道
			const sub = centrifuge.newSubscription('channel-1');
			//对订阅的频道进行监听
			sub.on('publication', function(ctx) {
				// 此处接收实时的消息推送
				console.log(ctx, 'publication');
				console.log('publication', ctx)
			});
			// 触发订阅过程
			sub.subscribe();

			// 监听第一次建立连接
			centrifuge.on('connecting', function(ctx) {
				console.log('Connecting-1: ', ctx);
			});
			// 监听断开连接
			centrifuge.on('disconnected', function(ctx) {
				console.log('Connecting-2: ', ctx);
			});
			// 实例事件上绑定侦听器。
			centrifuge.on('connected', function(ctx) {
				console.log('Connecting-3: ', ctx);
			});
			// 建立连接
			centrifuge.connect();
		</script>
	</body>
</html>